<template>
	<div class="map" ref="map"></div>
</template>

<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
let map;
function myMarker(options) {
	TMap.DOMOverlay.call(this, options);
}
myMarker.prototype = new TMap.DOMOverlay();

// 初始化时，将参数设置到实例上
myMarker.prototype.onInit = function({id, position}) {
	this.id = id;
	this.position = position;
};

// 当需要创建DOM元素时调用，自己去控制这个dom，并返回dom
myMarker.prototype.createDOM = function() {
	let mydom = document.createElement("div");
	mydom.classList.add('mydom');
	mydom.addEventListener('click', () => {
		this["event"] = event;
		this.emit('click', this);
	});
	return mydom;
};

// 在地图移动/缩放后执行，更新DOM元素
myMarker.prototype.updateDOM = function() {
	if (!map) return;
	// 经纬度坐标转容器像素坐标
	let pixel = map.projectToContainer(this.position);
	//默认使用DOM左上角作为坐标焦点进行绘制（左上对齐）
	//如想以DOM中心点（横向&垂直居中）或其它位置为焦点，可结合this.dom.clientWidth和this.dom.clientHeight自行计算
	let left = pixel.getX() - this.dom.clientWidth / 2 + 'px'; //本例水平居中
	let top = pixel.getY() + 'px';
	//将平面坐标转为三维空间坐标
	this.dom.style.transform = `translate3d(${left}, ${top}, 0px)`;
};



export default{
	data(){
		return{
			marker: undefined,
			markers: []
		}
	},
	props:{
		markersData:{
			type: Array,
			default: () => []
		},
		center:{
			type: Array,
			default: () => [39.984120, 116.307484]
		}
	},
	watch:{
		markersData:{
			deep: true,
			immediate: true,
			handler(val){
				if(!val.length) return;
				setTimeout(() => {
					this.createMarker(val);
				}, 0)
			}
		}
	},
	methods:{
		initMap(){
			let center = new TMap.LatLng(this.center[0], this.center[1]);
			map = new TMap.Map(this.$refs.map, {
				center,
				zoom: 7,
			});
		},
		// 根据marker信息创建marker，添加点击事件
		createMarker(arr){
			this.markers = [];
			arr.forEach((v) => {
				let {id, lat, lng} = v;
				let marker = new myMarker({
					id,
					map,
					position: new TMap.LatLng(lat, lng)
				});
				this.markers.push(marker);
				marker.on('click', (e) => {
					this.$emit('handleMarker', e.id)
				})
			})
		}
	},
	mounted() {
		this.initMap();
	}
}
</script>

<style scoped lang="less">
.map{
	position: relative;
	height: 100%;
	border: 1px solid var(--themeColor);
	box-sizing: border-box;
	overflow: hidden;
	z-index: 0;
	font-size: 16px;
	/deep/ .mydom{
		position: absolute;
		width: 12px;
		height: 12px;
		top: 0;
		left: 0s;
		transform: translate(-50%, -50%);
		background-color: #f00;
		border-radius: 50%;
		cursor: pointer;
		&::after{
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			border: 1px solid #f00;
			border-radius: 50%;
			animation: warn 1.5s ease-out 0s infinite;
		}
		&::before{
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			width: 100%;
			height: 100%;
			transform: translate(-50%, -50%);
			box-sizing: border-box;
			border: 1px solid #f00;
			border-radius: 50%;
			animation: warn 1.5s ease-out .7s infinite;
		}
	}
}
/* 圈圈动画 */
@keyframes warn {
	0% {
		transform: translate(-50%, -50%) scale(.8);
		opacity: 1;
	}
	30% {
		opacity: .8;
	}
	100% {
		transform: translate(-50%, -50%) scale(3.2);
		opacity: 0;
	}
}
</style>
